<template>
  <!--登录表单容器-->
  <div class="login_container">
    <!--登录区域-->
    <div class="login_box">
      <!--头像-->
      <div class="avatar_box">
        <img src="../assets/img/logo.png" alt="">
      </div>

      <!--字体-->
      <div class="login-text">
        <span class="login-span1">用&nbsp;户&nbsp;登&nbsp;录</span>
      </div>

      <!--表单-->

      <template>
        <el-form :model="loginForm" status-icon :rules="loginRules" ref="loginForm" label-width="0" class="login_Form">
          <el-form-item class="login-input-box" prop="loginName">
            <el-input type="text" prefix-icon="el-icon-user-solid" placeholder="用户名:" v-model="loginForm.loginName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item class="login-input-box" prop="password">
            <el-input type="password" prefix-icon="el-icon-lock" placeholder="密    码:" v-model="loginForm.password" autocomplete="off"></el-input>
          </el-form-item>

<!--          <el-form-item prop="verifyCode" class="verifyCode_box">
            <el-input v-model="loginForm.verifyCode" placeholder="验证码:" prefix-icon="el-icon-mobile" class="verifyCode"></el-input>
            <img src="../assets/img/msFXK1.gif" alt="" class="verifyCode_img">
          </el-form-item>-->

          <el-form-item class="login-button-box">
            <el-button class="login-button-zhuce" @click="addUser">注册</el-button>
            <el-button class="login-button-dl" type="primary" @click="login">登录</el-button>
          </el-form-item>
        </el-form>
      </template>
    </div>

    <!--      引入用户注册-->
    <UserAdd :addVisible="addOrUpdateVisible"
             @changeShow="showAddOrUpdate" ref="addOrUpdateRef"></UserAdd>

  </div>
</template>

<script>

import UserAdd from "@/components/UserAdd";
import {userLogin} from "@/api/login";

export default {
  name: "Login",
  components: {UserAdd},
  data() {
    return {
      loginForm: {
        loginName:'',
        password:'',
        // verifyCode: ''
      },
      loginVo: [],

      // 控制新增编辑弹窗的显示与隐藏
      addOrUpdateVisible: false,

      loginRules: {
        loginName: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 5, max: 16, message: '长度在 5 到 16 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 5, max: 16, message: '长度在 5 到 16 个字符', trigger: 'blur' }
        ],
/*        verifyCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]*/
      }
    };
  },

  created() {
    this.open2();
  },
  methods: {
    // 按钮点击事件 显示新增编辑弹窗组件
    addUser(){
      this.addOrUpdateVisible = true
    },
    // 监听子组件弹窗关闭后触发，有子组件调用
    showAddOrUpdate(data){
      this.addOrUpdateVisible = data !== 'false';
    },

    //登录
    login () {
      const _this = this;
      userLogin({
        loginName: this.loginForm.loginName,
        password: this.loginForm.password,
      }).then((res) => {
        let code=res.data.code;
        if(code===200){
          let data=res.data.data.loginVo;
          let token=data.token;
          let user=data.user;
          //存储token
          _this.$store.commit('SET_TOKEN', token);
          //存储user，优雅一点的做法是token和user分开获取
          _this.$store.commit('SET_USER', user);
          console.log(_this.$store.state.token);
          const path = this.$route.query.redirect;
          this.$router.replace({path: path === '/main' || path === undefined ? '/main' : path})
          this.open1()
        }else {
          this.openTip();
        }
      }).catch(()=>{

      });
/*      this.$axios//用this.$axios就代表main.js中的Vue.prototype.$axios = axios的axios
          .post('/user/login', {//用post方法传 输入框输入的用户名和密码
            loginName: this.loginForm.loginName,
            password: this.loginForm.password,
          })
          .then((successResponse) => {//回调函数当post成功后执行
            if (successResponse.data.code === 200) {//如果后端返回的状态码是200
              this.open1();//调用第一个弹窗方法表示登录成功
              this.$router.replace({//路由替换为index
                path: '/user'
              });
            }
            if (successResponse.data.code === 2007 ) {
              this.openTip();
            }
          })
          .catch((failResponse) => {
          });*/
    },

    open1(){
      this.$notify({
        title: '提示',
        message: '登录成功！'
      });
    },
    open2(){
      this.$notify({
        title: '提示',
        message: '欢迎登录财务系统！'
      });
    },
    openTip() {
      this.$notify({
        title: '提示',
        message: '账号或者密码错误！'
      });
    }
  },
}

</script>


<style>
.login_container{
  height: 100%;
  background-color: #272123;

}

.login_box{
  width: 482px;
  margin: auto;
  height: 360px;
  background-color: #252E37;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  opacity: 0.9;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);

}

.avatar_box{
  width: 100px;
  height: 100px;
  border: 1px solid #eeeeee;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: -65px auto;
  background-color: #FFFFFF;
}

img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

input::placeholder {
  color: #757575;
  font-size: 20px;
}

.login-text{
  margin-top: 65px;
  text-align: center;
}

.login-span1{
  font-size: 40px;
  color: #2370D4;
}

.login_Form{
  position: absolute;
  width: 100%;
  box-sizing: border-box;
}

.login-input-box{
  width: 400px;
  margin-left: 41px;
  margin-top: 20px;
  margin-bottom: 20px;
  position: relative;
}

.login-button-box{
  width: 400px;
  height: 50px;
  margin-top: 30px;
  margin-right: 41px;
  margin-left: 41px;
}

.login-button-zhuce{
  width: 100px;
  height: 48px;
  margin-left: 180px;
  color: #28a5f0;
  background-color: #263F5E;
  border: solid 1px #28a5f0;
  font-size: 20px;
}

.login-button-dl{
  width: 100px;
  height: 48px;
  margin-left: 15px;
  color: #28a5f0;
  background-color: #2A5492;
  border: solid 1px #28a5f0;
  font-size: 20px;
}



</style>